<template>
	<view class="wrap">
		<view class="content">

			<view class="lists">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="160rpx">
					<u-form-item label="商家名称：" prop="name" ref="item1">
						<u--input v-model="model1.name" disabled  placeholder="请输入商家名称"></u--input>
					</u-form-item>
					<u-form-item label="商家地点：" prop="address" ref="item1">
						<u--input v-model="model1.address" disabled  placeholder="请输入商家名称"></u--input>
					</u-form-item>
					<u-form-item label="视频：" prop="video" ref="item1">
						<view class="add_photo" @click="afterRead('video')"  >
							<button class="upload_button">
								<u-icon name="plus" color="#fff"></u-icon>
								添加视频
							</button>

						</view>
					</u-form-item>
					<view class="list">
						<view class="xh">
							<u-row>
								<u-col span="4">
									<view calss="title">序号</view>
								</u-col>
								<u-col span="4">
									<view calss="title">视频名称</view>
								</u-col>
								<u-col span="4">
									<view calss="title" >操作</view>
								</u-col>
							</u-row>
						</view>
						<view class="item" v-for="(i,index) in sjspList" :key="index">
							<u-row>
								<u-col span="4">
									<text>{{index + 1}}</text>
								</u-col>
								<u-col span="4">
									<text>{{i.mc}}</text>
								</u-col>
								<u-col span="4" @click="delSp(i.id)">
									<text>删除</text>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-form-item label="图片：" prop="photo" ref="item1">
						<view class="add_photo" @click="afterRead('photo')">
							<button class="upload_button">
								<u-icon name="plus" color="#fff"></u-icon>
								添加图片
							</button>
						</view>

					</u-form-item>
					<view class="list">
						<view class="xh">
							<u-row>
								<u-col span="2">
									<view calss="title">序号</view>
								</u-col>
								<u-col span="2">
									<view calss="title">图片</view>
								</u-col>
								<u-col span="4">
									<view calss="title">视频名称</view>
								</u-col>
								<u-col span="2">
									<view calss="title">类型</view>
								</u-col>
								<u-col span="2">
									<view calss="title">操作</view>
								</u-col>
							</u-row>
						</view>
						<view class="item" v-for="(i,index) in sjtpList" :key="index">
							<u-row>
								<u-col span="2">
									<text>{{index + 1}}</text>
								</u-col>
								<u-col span="2">
									<text>点击</text>
								</u-col>
								<u-col span="4">
									<text>{{i.spmc}}</text>
								</u-col>
								<u-col span="2" v-if="i.sfgg === 1">
									<text>公共</text>
								</u-col>
								<u-col span="2" v-else>
									<text>定位</text>
								</u-col>
								<u-col span="2" @click="delTp(i.id)">
									<text>删除</text>
								</u-col>
							</u-row>
						</view>
					</view>
				</u--form>
				<!-- <u-button type="primary" text="保存" customStyle="margin-top: 50px" @click="submit"
					color="linear-gradient(to right, rgb(0, 150, 136), rgb(139, 195, 74))"></u-button> -->
			</view>
		</view>
		<AddVideo ref="addvideoRef" bg=""  @getList="getList"/>
		
		<AddPhoto ref="addphotoRef" bg="" @getList="getList"/>
	</view>
</template>

<script>
	import AddVideo from './AddVideo.vue';
	import AddPhoto from './AddPhoto.vue';
	import cityPicker from '@/components/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

	export default {
		components: {
			cityPicker,
			AddVideo,
			AddPhoto

		},
		data() {
			return {
				model1: {
					name: '',
					address: '',
				},
				sjspList:[],
				sjtpList:[],
				id:'',
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入商家名称',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}
				},

			}
		},
		onLoad(options) {
			this.id = options.id
			this.getById();
		},
		methods: {
			delTp(id){
				this.$http.post('/app/sj/delTp', {
					id:id
				}).then(res => {
					this.getById();
					uni.$u.toast('删除成功')
				})
			},
			delSp(id){
				this.$http.post('/app/sj/delSp', {
					id:id
				}).then(res => {
					this.getById();
					uni.$u.toast('删除成功')
				})
			},
			getList(){
				this.getById();
			},
			getById(){
				this.$http.post('/app/sj/getById', {
					id:this.id
				}).then(res => {
					this.model1.name = res.sj.sjxx.sjmc
					var smc = res.sj.sjxx.smc
					var cmc = res.sj.sjxx.cmc
					var qmc = res.sj.sjxx.qmc
					this.model1.address = smc+','+cmc+','+qmc
					this.sjspList = res.sj.sjsp
					this.sjtpList = res.sj.sjtp
					console.log(res)
				})
			},
			chooseCity() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.model1.address = val.name
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			//提交数据
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					this.visible = false
					uni.navigateTo({
						url: "/pages/gly/gly_form"
					})
				}).catch(errors => {
					this.visible = false
					uni.$u.toast('校验失败')
				})
			},
			//新增视频或者图片
			afterRead(e) {
				if (e == 'video') {
					this.$refs.addvideoRef.open(this.id);
				} else if (e == 'photo') {
					this.$refs.addphotoRef.open(this.id);
				}
			}

		}
	}
</script>


<style scoped lang="scss">
	.wrap {
		background: url($imgUrl + "/lt_bg.jpg") no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height: 100vh;

		.search {
			margin: 20rpx auto;
			width: 95%;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}

	.content {
		width: 90%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;


	}

	/deep/ .u-form {
		.u-form-item__body__right {
			// border: 1rpx solid #276329 !important;
			height: 70rpx !important;
		}
	}

	.add_photo {
		width: 95%;

		margin: 10rpx auto;
	}

	.upload_button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 58rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 32rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
	}

	.list {
		background: #fff;
		width: 95%;
		margin: 30rpx auto;
		border: 1rpx solid #4caf50;
		color: #333;

		.xh {
			height: 70rpx;
		}

		.item {
			height: 70rpx;

		}

		/deep/ .u-col {
			display: flex;
			justify-content: center !important;
			align-items: center !important;
			height: 70rpx;
			border-left: 1rpx solid #13b1a2 !important;
			border-bottom: 1rpx solid #13b1a2 !important;
		}
	}
</style>